<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>萌宠集结号</title>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/base.css">
</head>
<body>
  <audio autoplay loop>
    <source src="./bgm.mp3" type="audio/mpeg">
  </audio>
<div class="bigbg wrapper">
    
  <div class="cunzi wrapper">
    
    <!-- 添加三个 NPC 元素 -->
    <div class="cute" id="cute1">
      <img src="../images/npc15.png" alt="">
    </div>
    <div class="cute" id="cute2">
      <img src="../images/boss1.png" alt="">
    </div>
    <div class="cute" id="cute3">
      <img src="../images/npc11.png" alt="">
    </div>
    <div id="character">
      <img id="up" src="../images/up.png" alt="">
      <img id="down" src="../images/down.png" alt="">
      <img id="left" src="../images/left.png" alt="">
      <img id="right" src="../images/right.png" alt="">
    </div>

    <div class="slideshow-container">
      <div class="slide">
        <a href="index4.html" onclick="showModal(event)"><img src="../images/beimen.png" alt="beimen"></a>
      </div>
      <div class="slide">
        <a href="index4.html"  onclick="showModal(event)"><img src="../images/beimen1.png" alt="beimen1"></a>
      </div>
    </div>
<!-- 加载动画 -->
<div id="loadingAnimation" class="loading-animation">
  <img src="../images/loading.gif" alt="Loading">
</div>

<!-- 弹出图片 -->
<div id="popupImage" class="popup-image">
  <ul>
    <li><img src="../images/loadingimg2.gif" alt=""></li>
    <li><img src="../images/loadingimg4.gif" alt=""></li>
    <li><img src="../images/loadingimg5.gif" alt=""></li>
</ul>
</div>

   
  </div>
  <!--主角头像-->
  <button class="bighead"></button>
  <!--背景音乐按钮-->
  <button id="mc" onclick="toggleMusic()"></button>
  <audio id="myAudio">
    <source src="../music/bgm1.mp3" type="audio/mpeg">
  </audio>
  <!--指南提示-->
  <button id="help" ></button>
  <!--当前场景-->
  <button id="where" ><h2>村长家的<br>后花园</h2></button>
  <!--背包功能-->
  <button id="bag" ></button>
  <!--宠物功能-->
  <button id="pet"></button>
  <!--任务功能-->
  <button id="task"></button>
  <!--狩猎功能-->
  <button id="hunt"></button>
  <!--成就功能-->
  <button id="win"></button>
  <!--商店功能-->
  <button id="shop"></button>
  <!--农场功能-->
  <button id="farm"></button>
  <!--宠物图鉴功能-->
  <button id="book"></button>

  

  <!--指南提示弹窗-->
<div id="helpPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>指南提示</h3>
    <p>这里是指南提示的内容。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<!--当前场景弹窗-->
<div id="wherePopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <h3>当前场景</h3>
    <p>你现在在陀普斯小镇。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<!--背包功能弹窗-->
<div id="bagPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="beibao">
      <button id="clean"></button>
      <button id="sell"></button>
      <button class="close-popup"></button>
    </div>









    </div>
  </div>
</div>

<!--宠物功能弹窗-->
<div id="petPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="chongwu">
      









    </div>
    <button class="close-popup"></button>
  </div>
</div>
<!--任务功能弹窗-->
<div id="taskPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="task">
      <ul>
        <li class="o"> 
          <div class="head" id="head1"></div>
          <div>
            <h2>村长修德的寄望</h2>
            <p>既然来到这，选择与你并肩作战的伙伴，前往陀普斯林间开始你的冒险吧</p>
            <div class="progress-bar">
              <hr class="progress-line" style="width: 50%;">
            </div>
          </div>
          <div></div>
          <button class="have">领取委托</button>
           </li>
           <li class="t"> 
            <div class="head" id="head3"></div>
            <div>
              <h2>菲斯娜小姐的困扰</h2>
              <p>一年一度的舞会即将开始，可是菲斯娜小姐的礼服却沾上了蓝莓芝士，听说陀普斯池塘边能够找到一种神奇露珠......</p>
              <div class="progress-bar">
                <hr class="progress-line" style="width: 50%;">
              </div>
            </div>
            <div></div>
            <button class="have">领取委托</button>
             </li>
           <li class="o"> 
            <div class="head" id="head2"></div>
            <div>
              <h2>巴德爷爷的委托</h2>
              <p>陀普斯小镇居民区东南方向的巴德爷爷的拐杖消失不见了，需要一个好心人来帮助巴德爷爷......</p>
              <div class="progress-bar">
                <hr class="progress-line" style="width: 50%;">
              </div>
            </div>
            <div></div>
            <button class="have">领取委托</button>
             </li>
            
               <li class="t"> 
                <div class="head" id="head4"></div>
                <div>
                  <h2>消失的卡波猫</h2>
                  <p>伊塔啦公主的卡波猫今早不见了，据目击者陈述，卡波猫被一个戴黑色帽子的人带向了陀普斯沼泽......</p>
                  <div class="progress-bar">
                    <hr class="progress-line" style="width: 50%;">
                  </div>
                </div>
                <div></div>
                <button class="have">领取委托</button>
                 </li>
      </ul>
    </div>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--狩猎功能弹窗-->
<div id="huntPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="狩猎">
      <h1>此功能在打败狩猎者后才能使用</h1>
     









    </div>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--宠物图鉴功能弹窗-->
<div id="bookPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="book">
      <div class="pet11">
        <img src="../images/npc15.png" alt="">
        <h1>脆耶喵</h1>
      </div>
      <hr>
      <div class="pet22">
        <img src="../images/boss1.png" alt="">
        <h1>茄茄球</h1>
      </div>
      <hr>
      <div class="pet33">
        <img src="../images/npc11.png" alt="">
        <h1>起司兔</h1>
      </div>
      









    </div>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--成就功能弹窗-->
<div id="winPopup" class="popupa">
    <!--弹窗内容-->
  <div class="popup-content">
    <div class="chengjiu">
      
        <ul>
          <li class="o"> 
            <div class="head" id="head5"></div>
            <div>
              <h2>初来乍到</h2>
              <p>既然来到这，选择与你并肩作战的伙伴，前往陀普斯林间开始你的冒险吧</p>
              <div class="progress-bar">
                <hr class="progress-line" style="width: 50%;">
              </div>
            </div>
            <div></div>
            <button class="have">领取奖励</button>
             </li>
             <li class="t"> 
              <div class="head" id="head6"></div>
              <div>
                <h2>我才不要和你做朋友呢</h2>
                <p>为什么他也会出现在这里......</p>
                <div class="progress-bar">
                  <hr class="progress-line" style="width: 50%;">
                </div>
              </div>
              <div></div>
              <button class="have">领取奖励</button>
               </li>
             <li class="o"> 
              <div class="head" id="head7"></div>
              <div>
                <h2>闪闪发光</h2>
                <p>不是只有特定时候，我才能发光，我...有信心的...</p>
                <div class="progress-bar">
                  <hr class="progress-line" style="width: 50%;">
                </div>
              </div>
              <div></div>
              <button class="have">领取奖励</button>
               </li>
              
                 <li class="t"> 
                  <div class="head" id="head8"></div>
                  <div>
                    <h2>人生的赞歌</h2>
                    <p>这......不止是陀普斯的赞歌，更是我的赞歌，对不起，我该回去了......</p>
                    <div class="progress-bar">
                      <hr class="progress-line" style="width: 50%;">
                    </div>
                  </div>
                  <div></div>
                  <button class="have">领取奖励</button>
                   </li>
        </ul>









    </div>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--商店功能弹窗-->
<div id="shopPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="shop">
      









    </div>
    <button class="close-popup">关闭</button>
  </div>
</div>
<!--农场功能弹窗-->
<div id="farmPopup" class="popupa">
  <!--弹窗内容-->
  <div class="popup-content">
    <div class="wrap">
      <!-- 显示作物的数量 -->
      <div class="table_top">仓库:
          <div class="table_left">樱桃:0</div>
          <div class="table_zhong1">番茄:0</div>
          <div class="table_zhong2">橘子:0</div>
          <div class="table_right">茄子:0</div>
      </div>
      <!-- 菜地 -->
      <div class="wai" onclick="zzz()"></div>
      <div class="cai" onclick="ccc()"></div>
      <div class="tudi">
      </div>
      <div class="caidan">
      </div>
  </div>



     </div>








     <button class="close-popup">关闭</button>
    </div>
   
   
  </div>
</div>
  <!-- 弹窗元素 -->

  <div class="popup" id="popup1">
    <div class="cutename">
      <h2>脆耶喵 </h2><p>来自神秘岛屿的战斗系猫咪</p>
    </div>
    
    <div class="small"><img src="../images/npc15.png" alt=""></div>
    <div class="whoisit"><p>
      脆耶喵是一只来自神秘岛屿的猫咪，它们生活在一个充满战斗气息的部落中。这些猫咪天生就拥有战斗的本能和强大的力量，
      他们擅长利用锋利的爪子进行高速连击，同时也能够隐匿行动并发起致命的攻击。他们保护着岛上的秘密和宝藏，是勇士和宠物训练师梦寐以求的伙伴。
</p></div>
  <div class="jinen">
    <h2>技能介绍</h2>
    <button>刀刃斩：<br>脆耶喵可以迅速挥动锋利的爪子，<br>对敌人进行高速连击，造成巨大伤害。
     </button>
    <button> 影袭术：<br>脆耶喵可以悄无声息地接近敌人，<br>然后快速发动攻击，将其击倒。
      </button>
    <button> 
      防御姿态：<br>脆耶喵可以进入防御姿态，提升自身的防御力，<br>减少受到的伤害。</button>
    
  </div>
    <div class="choose">
      <button onclick="selectNPC('cute1')">Yes</button>
    <button onclick="closePopup('popup1')">No</button>
    </div>
  </div>
  <div class="popup" id="popup2">
    <div class="cutename"><h2>茄茄球</h2><p>-坚定的森林守卫者</p></div>
    <div class="small"><img src="../images/boss1.png" alt=""></div>
    <div class="whoisit"><p>
      茄茄球原本是一颗生长在森林里的大番茄，但某天它被一道神秘的光芒笼罩，突然变成了拥有灵性和自我意识的宠物。它的身体坚韧,
      同时还有着强大的操控草木的能力，可以调动自然元素进行攻击。在人类的探索中，只有极少数人看到过它们的身影，因此成为了传说中的神秘宠物。
</p></div>
    <div class="jinen">
      <h2>技能介绍</h2>
      <button>草木连锁：<br>茄茄球可以释放出一根藤条<br>将敌人缠住并造成伤害。
       </button>
      <button> 叶刃风暴:<br>茄茄球可以将周围的树叶变成飞刀，<br>对敌人造成切割伤害。
        </button>
      <button> 
        静电场：<br>茄茄球可以释放出静电，形成一道电场，<br>对敌人造成伤害并降低其速度。</button>
      
    </div>
    <div class="choose">
    <button onclick="selectNPC('cute2')">Yes</button>
    <button onclick="closePopup('popup2')">No</button>
    </div>
  </div>
  <div class="popup" id="popup3">
    <div class="cutename"><h2>起司兔</h2><p>敏捷的丛林使者</p></div>
    <div class="small"><img src="../images/npc11.png" alt=""></div>
    <div class="whoisit"><p>
起司兔生活在一个迷人的魔法森林中，它们是森林里速度最快的生物之一。起司兔拥有一身闪亮的毛发和灵巧的四肢，可以在森林中自由奔跑。它们以快速和敏捷
的身手而闻名，常常被其他动物当作灵感和榜样。能够快速穿越各种地形，是战斗中的高机动性伙伴。
    <div class="jinen">
      <h2>技能介绍</h2>
      <button>落地疾风：<br>起司兔可以用强大的腿力迅速冲刺，<br>对敌人造成伤害。
       </button>
      <button> 闪电突袭：<br>起司兔可以在眨眼之间消失并再次<br>，出现在敌人身边，利用瞬间的速度打击对手
        </button>
      <button> 
        幻影步：<br>起司兔可以迅速移动，快到敌人几乎看不清它的身影，<br>同时提高自己的闪避能力。</button>
      
    </div>
    <div class="choose">
      <button onclick="selectNPC('cute3')">Yes</button>
      <button onclick="closePopup('popup3')">No</button>
    </div>
    
  </div>

</div>

</div>

</body>
</html>

<script type="text/javascript" src="../scripts/3.js"></script>
</body>
</html>